﻿@{
    Layout = "~/Views/Shared/_Layout_RTU_block.cshtml";
    ViewBag.Title = "IndicatorDiagram";
}

<div class="xds-no-breadcrumb">

    <div class="full-height">
        <div class="full-height-scroll white-bg border-left">
            <div id="main" class="container-fluid">
                <div class="row" id="main-row"></div>
            </div>
            <div id="Pagination" class="pagination"></div>
        </div>
    </div>
</div>
@section Styles {
@Styles.Render("~/plugins/sweetAlertStyles")

    <style type="text/css">
        #main td {
            padding:2px;
        }
    </style>
}
@section Scripts {
    @Scripts.Render("~/bundles/echarts")
    @Scripts.Render("~/bundles/pagination")
    @Scripts.Render("~/plugins/sweetAlert")
    <script type="text/javascript">
        var charts = [];
        $(document).ready(function () {
            refresh();
            $('.xds-minimalize').click(function () {
                setTimeout("ReDrawChart()", 400);
            });
        })
        function ReDrawChart() {
            $(charts).each(function (index, chart) {
                chart.resize();
            });
        }
        function refresh() {
            $.ajax({
                url: '/Indicator/Index',
                data: { blockid: sessionStorage.blockid },
                type: 'post',
                async: false,
                dataType: 'json'
            }).success(function (result) {
                var num_entries = Math.floor(result.totalnum / 16 + 1);
                $("#Pagination").pagination(num_entries, {
                    num_edge_entries: 1, //边缘页数
                    num_display_entries: 4, //主体页数
                    callback: pageselectCallback,
                    items_per_page: 1, //每页显示1项
                    //prev_text: "前一页",
                    //next_text: "后一页"
                    prev_text: "Previous",
                    next_text: "Next"
                });
            }).error(function () {
                swal({
                    title: "Welcome in Alerts!",
                    text: "The connection between server and units is not very stable. For any technical assistant, please call 1-(517)-927-5910."
                });

            });
        }
        function pageselectCallback(page_index, jq) {
            $.ajax({
                url: '/Indicator/Index',
                data: { blockid: sessionStorage.blockid, page: page_index+1 },
                type: 'post',
                dataType: 'json'
            }).success(function (result) {
                $('#main-row').empty();
                $.each(result.data, function (i, item) {
                    $('#main-row').append('<div class="col-md-6 col-lg-4" style="display:block"><div id="' + item.Datetime + '" style="height:200px;width:100%"></div><div id="' + item.Datetime + '-2" style="height:auto;width:90%;margin-left:5%;display:block" ><table class="table table-striped"><thead><tr><th></th></tr></thead><tbody style="font-size:8px">'
                        //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '冲    程' + '</td><td>' + item.Stroke + '(米)</td><td><img src="/Images/circle.jpg"/></td><td>' + '冲    次' + '</td><td>' + item.Stroketimes + '(次)</td></tr>'
                        //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '最小载荷' + '</td><td>' + item.minload + '(KN)</td><td><img src="/Images/circle.jpg"/></td><td>' + '最大载荷' + '</td><td>' + item.maxload + '(KN)</td></tr>'
                        //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '井口油压' + '</td><td>' + item.O_Press + '(MPa)</td><td><img src="/Images/circle.jpg"/></td><td>' + '汇管压力' + '</td><td>' + item.Manif_Press + '(MPa)</td></tr>'
                        //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '井口温度' + '</td><td>' + item.O_Temp + '(℃)</td><td><img src="/Images/circle.jpg"/></td><td>' + '汇管温度' + '</td><td>' + item.Manif_Temp + '(℃)</td></tr>'
                        //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '井口套压' + '</td><td>' + item.Cas_Press + '(MPa)</td><td><img src="/Images/circle.jpg"/></td><td>' + '功率因数' + '</td><td>' + item.Pow_Factor + '(%)</td></tr>'
                        //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '有功功率' + '</td><td>' + item.Actpow + '(KW)</td><td><img src="/Images/circle.jpg"/></td><td>' + '系统效率' + '</td><td>' + item.Sys_Eff + '(%)</td></tr>'
                        //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '平 衡 率' + '</td><td>' + item.Bal_Rate + '(%)</td></tr>'
                        + '<tr><td><img src="/Images/circle.jpg"/></td><td class="text-bold">' + 'Stroke Length' + '</td><td class="textbold">' + item.Stroke + '(s)</td></tr><tr><td><img src="/Images/circle.jpg"/></td><td class="text-bold">' + 'Stroke Per Minute' + '</td><td class="textbold">' + item.Stroketimes + '(time)</td></tr>'
                        + '<tr><td><img src="/Images/circle.jpg"/></td><td class="text-bold">' + 'Min. Load' + '</td><td class="textbold">' + item.minload + '(KN)</td></tr><tr><td><img src="/Images/circle.jpg"/></td><td class="text-bold">' + 'Max. Load' + '</td><td class="textbold">' + item.maxload + '(KN)</td></tr>'
                        + '<tr><td><img src="/Images/circle.jpg"/></td><td class="text-bold">' + 'Wellhead Oil PRESS' + '</td><td class="textbold">' + item.O_Press + '(MPa)</td></tr>'
                        + '<tr><td><img src="/Images/circle.jpg"/></td><td class="text-bold">' + 'Wellhead TEMP' + '</td><td class="textbold">' + item.O_Temp + '(℃)</td></tr>'
                        //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + 'Tube PRESS' + '</td><td>' + item.Manif_Press + '(MPa)</td></tr><tr><td><img src="/Images/circle.jpg"/></td><td>' + 'Tube TEMP' + '</td><td>' + item.Manif_Temp + '(℃)</td></tr><tr><td><img src="/Images/circle.jpg"/></td><td>' + 'Surface Casing PRESS' + '</td><td>' + item.Cas_Press + '(MPa)</td><td><img src="/Images/circle.jpg"/></td><td>' + 'PWR Factor' + '</td><td>' + item.Pow_Factor + '(%)</td></tr>'
                        //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + 'Active PWR' + '</td><td>' + item.Actpow + '(KW)</td><td><img src="/Images/circle.jpg"/></td><td>' + 'Sys EFF' + '</td><td>' + item.Sys_Eff + '(%)</td></tr>'
                        //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + 'Balance RATE' + '</td><td>' + item.Bal_Rate + '(%)</td></tr>'
                        + '</tbody></table></div><div style="text-align:center"><button type="button" onclick="gotowell(' + item.Well_ID + ',\'' + item.Well_Name + '\')" class="btn btn-xs btn-primary">View</button></div></div>');
    //                $('#main-row').append('<div class="col-md-6 col-lg-4" style="display:block"><div id="' + item.Datetime + '" style="height:200px;width:100%"></div><div id="' + item.Datetime + '-2" style="height:auto;width:90%;margin-left:5%;display:block" ><table class="table table-striped"><thead><tr><th></th></tr></thead><tbody style="font-size:8px">'
    //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '冲    程' + '</td><td>' + item.Stroke + '(米)</td><td><img src="/Images/circle.jpg"/></td><td>' + '冲    次' + '</td><td>' + item.Stroketimes + '(次)</td></tr>'
    //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '最小载荷' + '</td><td>' + item.minload + '(KN)</td><td><img src="/Images/circle.jpg"/></td><td>' + '最大载荷' + '</td><td>' + item.maxload + '(KN)</td></tr>'
    //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '井口油压' + '</td><td>' + item.O_Press + '(MPa)</td><td><img src="/Images/circle.jpg"/></td><td>' + '汇管压力' + '</td><td>' + item.Manif_Press + '(MPa)</td></tr>'
    //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '井口温度' + '</td><td>' + item.O_Temp + '(℃)</td><td><img src="/Images/circle.jpg"/></td><td>' + '汇管温度' + '</td><td>' + item.Manif_Temp + '(℃)</td></tr>'
    //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '井口套压' + '</td><td>' + item.Cas_Press + '(MPa)</td><td><img src="/Images/circle.jpg"/></td><td>' + '功率因数' + '</td><td>' + item.Pow_Factor + '(%)</td></tr>'
    //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '有功功率' + '</td><td>' + item.Actpow + '(KW)</td><td><img src="/Images/circle.jpg"/></td><td>' + '系统效率' + '</td><td>' + item.Sys_Eff + '(%)</td></tr>'
    //+ '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '平 衡 率' + '</td><td>' + item.Bal_Rate + '(%)</td></tr>'
    //+ '</tbody></table></div></div>');
                    //$('#main-row').append('<div class="col-md-6 col-lg-4" style="height: 450px;"><div id="' + item.Datetime + '" style="height:200px;width:100%"></div><div id="' + item.Datetime + '-2" style="height:250px;width:85%;margin-left:5%" >'
                    //   + '<img src="/Images/circle.jpg"/><b>' + '冲    程' + '</b><b>' + item.Stroke + '(米)</b><img src="/Images/circle.jpg"/><b>' + '冲    次' + '</b><b>' + item.Stroketimes + '(次)</b><br/>'
                    //   + '<img src="/Images/circle.jpg"/><b>' + '最小载荷' + '</b><b>' + item.maxload + '(KN)</b><img src="/Images/circle.jpg"/><b>' + '最大载荷' + '</b><b>' + item.minload + '(KN)</b><br/>'
                    //   + '<img src="/Images/circle.jpg"/><b>' + '井口油压' + '</b><b>' + item.O_Press + '(MPa)</b><img src="/Images/circle.jpg"/><b>' + '汇管压力' + '</b><b>' + item.Manif_Press + '(MPa)</b><br/>'
                    //   + '<img src="/Images/circle.jpg"/><b>' + '井口温度' + '</b><b>' + item.O_Temp + '(℃)</b><img src="/Images/circle.jpg"/><b>' + '汇管温度' + '</b><b>' + item.Manif_Temp + '(℃)</b><br/>'
                    //   + '<img src="/Images/circle.jpg"/><b>' + '井口套压' + '</b><b>' + item.Cas_Press + '(MPa)</b><img src="/Images/circle.jpg"/><b>' + '功率因数' + '</b><b>' + item.Pow_Factor + '(%)</b><br/>'
                    //   + '<img src="/Images/circle.jpg"/><b>' + '有功功率' + '</b><b>' + item.Actpow + '(KW)</b><img src="/Images/circle.jpg"/><b>' + '系统效率' + '</b><b>' + item.Sys_Eff + '(%)</b><br/>'
                    //   + '<img src="/Images/circle.jpg"/><b>' + '平 衡 率' + '</b><b>' + item.Bal_Rate + '(%)</b>'
                    //   + '</div></div>');

                    showechart(item.Well_Name, item.Datetime, item.Indd_Data_Disp, item.Indd_Data_Load);
                });
            }).error(function () {
                swal({
                    title: "Welcome in Alerts!",
                    text: "The connection between server and units is not very stable. For any technical assistant, please call 1-(517)-927-5910."
                });
            });
            return false;
        }
        function showechart(wellid,chartId, xdata, ydata) {
            var myChart = echarts.init(document.getElementById(chartId));
            var data = [];

            for (var i = 0; i < xdata.length; i++) {
                var temp = [];
                temp.push(xdata[i]);
                temp.push(ydata[i]);
                data.push(temp);
            }
            var option = {
                title: {
                    //text: '油井：' + wellid + '时间：' + chartId,
                    text: 'Well No.' + wellid ,
                    subtext: ' Time ' + chartId,
                    textStyle: {
                        fontSize: 13
                    },
                    left: 'center'
                },
                tooltip: {
                    formatter: function (params) {
                        var data = params.data || [0, 0];
                        //return '位移：' + data[0].toFixed(2) + '（米）, 载荷：' + data[1].toFixed(2) + '（KN）';
                        return 'S:' + data[0].toFixed(2) + '(m),F:' + data[1].toFixed(2) + '(KN)';
                    }
                },
                grid: {
                    left: '5%',
                    right: '24%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    min: 0,
                    max: Math.floor(Math.max.apply(null, xdata)) + 1,
                    type: 'value',
                    //name: '位移(米)',
                    name: 'S/m',
                    axisLine: { onZero: false }
                },
                yAxis: {
                    min: Math.floor(Math.min.apply(null, ydata)) - 10,
                    max: Math.floor(Math.max.apply(null, ydata)) + 10,
                    type: 'value',
                    //name: '载荷(KN)',
                    name: 'F/KN',
                    axisLine: { onZero: false }
                },
                series: [
                  {
                      id: 'a',
                      type: 'line',
                      smooth: true,
                      symbolSize: 1,
                      data: data
                  }
                ]
            };
            //$("#" + chartId + "2").append('<b style="margin-left:25px;">冲  程:</b><b style="color:red;">' + '冲程' + '</b><b>(米)&nbsp;&nbsp;&nbsp;</b><b>冲  次:</b><b style="color:red;">' + '冲次' + '</b><b>(次/分)</b><br/><b style="margin-left:25px;">上行冲次:</b><b style="color:red;">' + '上行冲次' + '</b><b>(次/分)&nbsp;&nbsp;&nbsp;</b><b>下行冲次:</b><b style="color:red;">' + '下行冲次' + '</b><b>(次/分)</b>');
            myChart.setOption(option);
            charts.push(myChart);
        }
        window.onresize = function () {
            $(charts).each(function (index, chart) {
                chart.resize();
            });
        }
        function gotowell(id, name) {
            sessionStorage.wellid = id;
            sessionStorage.wellname = name;
            window.open("/FirstPage/Index", "_self")
        }
    </script>
}